<div class="toolbar-container block shrink-0" [class.pin]="pinToolbar()"></div>

<pac-story-toolbar #toolbar class="ngm-story__toolbar absolute shadow-xl overflow-hidden z-10
    backdrop-blur-sm hover:backdrop-blur-lg dark:shadow-neutral-800"
    [class.pin]="pinToolbar()"
    cdkDrag
    [cdkDragDisabled]="pinToolbar()"
    (cdkDragEnded)="onToolbarDragEnded($event)"
    [(editable)]="editable"
    [collapsible]="!pinToolbar()"
    (fullscreen)="onFullscreen($event)"
    (emulatedDeviceChange)="onEmulatedDevice($event)"
    (deviceZoomChange)="onDeviceZoom($event)"
    (resetScalePan)="resetScalePanState()"
    >
  @if (!pinToolbar()) {
    <button mat-icon-button cdkDragHandle class="pac-cdk__drag-handle">
        <mat-icon>drag_indicator</mat-icon>
    </button>
  }

    <button mat-icon-button (click)="toggleToolbarPin()" [matTooltip]="pinToolbar() ? 
        ('Story.Toolbar.OpenFloatingToolbar' | translate: {Default: 'Open Floating Toolbar'}) :
        ('Story.Toolbar.PinToolbar' | translate: {Default: 'Pin Toolbar'})"
        matTooltipPosition="after">
      @if (pinToolbar()) {
        <mat-icon fontSet="material-icons-outlined">open_in_new</mat-icon>
      } @else {
        <mat-icon fontSet="material-icons-outlined">push_pin</mat-icon>
      }
    </button>

    <button mat-icon-button class="pac-story-designer__menu-trigger mat-menu-trigger"
        [class.active]="drawer.opened"
        [matTooltip]="'Story.Toolbar.AttributesPanel' | translate: {Default: 'Attributes Panel'}"
        matTooltipPosition="after"
        (click)="drawer.opened=!drawer.opened">
        <mat-icon fontSet="material-icons-outlined">edit_attributes</mat-icon>
    </button>
</pac-story-toolbar>

<div class="flex-1 relative overflow-hidden">
  <mat-drawer-container class="ngm-story__container flex-1 h-full w-full" autosize [hasBackdrop]="false" cdkDropListGroup>
    <mat-drawer #drawer class="ngm-story__designer-drawer mat-elevation-z2"
      [mode]="isMobile() ? 'over' : 'side'"
      position="end" 
      [(opened)]="designerOpened"
      ngmResizer [resizerWidth]="400"
    >
      <ngm-settings-panel class="ngm-story__settings-container overflow-hidden"
        liveMode
        [(opened)]="designerOpened" 
      />

      <div ngmResizerBar resizerBarPosition="left" style="z-index: 1;"
        cdkDrag
        cdkDragLockAxis="x"
      ></div>
    </mat-drawer>
    <mat-drawer-content class="ngm-story__container-content" [ngClass]="{EmulatedDevice: emulatedDevice()}">
      @if (emulatedDevice(); as emulatedDevice) {
        <div class="ngm-story__device-size-bar">
          @if (hoverSize(); as hoverSize) {
            <div class="layout-size__label text-xs">
                {{hoverSize.name}} - {{hoverSize.width}}px
            </div>
          }
          @for (size of ResponsiveBreakpoints | reverse; track size) {
            <div class="layout-size"
                [ngClass]="{hover: size.width <= hoverSize()?.width}"
                [ngStyle]="{'min-width': size.margin + 'px'}"
                (mouseenter)="mouseEnter(size)"
                (mouseleave)="mouseLeave(size)"
                (click)="selectSize(size)"
            >
            </div>
          }
          @for (size of ResponsiveBreakpoints.slice(1); track size) {
            <div class="layout-size"
                [ngClass]="{hover: size.width <= hoverSize()?.width}"
                [ngStyle]="{'min-width': size.margin + 'px'}"
                (mouseenter)="mouseEnter(size)"
                (mouseleave)="mouseLeave(size)"
                (click)="selectSize(size)"
            >
            </div>
          }
        </div>
      }

        <div #storyContainer class="ngm-story__device ngm-story-container flex-1 max-w-full overflow-auto">
            <div class="ngm-story__device-content relative w-full h-full origin-top shadow-md mx-auto"
                [ngStyle]="emulatedDeviceSizeStyle()"
                [style.transform]="'scale('+deviceZoom()?.value ?? 1+')'"
                ngmResizer [resizerWidth]="emulatedDevice()?.width" [resizerHeight]="emulatedDevice()?.height"
                [ngmResizerDisabled]="!emulatedDevice()"
                (resizerWidthChange)="onEmulatedDeviceWidthChange($event)"
                (resizerHeightChange)="onEmulatedDeviceHeighChange($event)"
                >

                <ngm-story class="w-full h-full" tabindex="0"
                  [id]="storyId"
                  [story]="story()"
                  [pageKey]="pageKey()"
                  [widgetKey]="widgetKey()"
                  [options]="storyOptions"
                  [editable]="editable"
                  [watermark]="watermark$ | async"
                >
                </ngm-story>

              @if (storyService.isEmpty$ | async) {
                <div class="ngm-story__quick-start w-full max-w-full flex flex-col justify-center items-center z-10 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                  <span class="text-6xl font-notoColorEmoji">🛒</span>
                  <div class="text-xl my-2">
                    {{ 'Story.Designer.LookingEmpty' | translate: {Default: 'This story is looking empty'} }}.
                  </div>
                  <div class="text-sm opacity-50">
                    {{ 'Story.Designer.LookingEmptyAddStoryPoint' | translate: {Default: 'Add a story point to start'} }}!
                  </div>

                  <div class="flex flex-wrap justify-center items-center gap-4 mt-4">
                    <div class="ngm-story__quick-start-widget"
                      (click)="openNewPage()">
                      <div>
                        {{ 'Story.Toolbar.New_Canvas_Page' | translate: {Default: "New Canvas Page"} }}
                      </div>
                    </div>

                    <div class="ngm-story__quick-start-widget"
                      (click)="toolbarService.openTemplates()">
                      <div>
                        {{ 'Story.Toolbar.AddTemplate' | translate: {Default: "Add Template"} }}
                      </div>
                    </div>
                  </div>
                </div>
              }
            
                <div ngmResizerBar resizerBarPosition="right" style="z-index: 1;"
                    cdkDrag
                    cdkDragLockAxis="x"
                    [cdkDragDisabled]="!emulatedDevice()"
                ></div>
                <div ngmResizerBar resizerBarPosition="bottom" style="z-index: 1;"
                    cdkDrag
                    cdkDragLockAxis="y"
                    [cdkDragDisabled]="!emulatedDevice()"
                ></div>
            </div>

        </div>

        <ngm-drawer-trigger class="absolute right-2 top-6 -translate-y-1/2 z-40" [(opened)]="designerOpened" side="right"
          [matTooltip]="'Story.Toolbar.AttributesPanel' | translate: {Default: 'Attributes Panel'}"
          matTooltipPosition="before"
        />
    </mat-drawer-content>
  </mat-drawer-container>

  @if (showExplorer()) {
    <ngm-story-explorer class="absolute top-0 left-0 w-full h-full z-20"
      cdkDropListGroup
      [data]="explore()"
      (closed)="closeExplorer($event)"
    />
  }

  <router-outlet #o="outlet"></router-outlet>
</div>

@if (error()) {
  <div class="pac-story__error">{{error()}}</div>
}
